const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true,
    open: true, // 自动打开浏览器
  },
  // 1) 源码映射 会单独生成一个 sourcemap 文件 出错会标识当前的 列 和 行 (大 和 全)
  // devtool: 'source-map', // 增加映射文件 可以帮我们调试源代码
  // 2) 不会产生单独的文件 但是可以显示 行 和 列, map 文件内容都会放在 home.js 中 1.09 M大小
  // devtool: 'eval-source-map',
  // 3）不会产生列 但是是一个单独的映射文件，并不会和 代码关联起来
  // devtool: 'cheap-module-source-map', // 产生后你可以保留起来
  // 4) 不会产生文件 集成在打包后的文件中 不会产生列，但是会产生行，会与代码关联，可以用来调试
  devtool: 'cheap-module-eval-source-map', // 产生后你可以保留起来
  mode: 'production', // development production
  entry: {
    home: './src/index.js',
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: "index.html", // 打包后的名字
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ]
          }
        }
      }
    ]
  }
};
